<template>
    <div class="admin-room-create-box">
        <div class="fields">
            <mt-field label="房间名" placeholder="请输入房间名" v-model="room_name"></mt-field>
            <mt-field label="房主" placeholder="请选择房主" v-model="user_name">
                <mt-button size="small" class="chiose" @click="chioseBtn">选择</mt-button>
            </mt-field>
            <mt-field label="房间密码" placeholder="请输入房间密码" type="password" v-model="password"></mt-field>
            <mt-field label="默认赔率" placeholder="请输入赔率" type="odds" v-model="odds"></mt-field>
            <mt-field label="金币比率" placeholder="请输入金币比率" type="gold_ratio" v-model="goldRatio"></mt-field>
            <mt-field label="租期" placeholder="请输入租期" type="date" v-model="endTime"></mt-field>
            <mt-field label="盘口链接" placeholder="请输入盘口链接" type="url" v-model="link"></mt-field>
        </div>
        <div class="act">
            <mt-button class="btn" type="primary" @click="submit" :disabled="loading">
                <span v-if="!loading">提交</span>
                <mt-spinner type="triple-bounce" color="white" v-if="loading"></mt-spinner>
            </mt-button>
        </div>
        <mt-popup
                v-model="popupVisible"
                popup-transition="popup-fade"
                position="bottom" class="popup">
                <div class="title">
                    <span class="left" @click="cannel">取消</span>
                    <span class="center">请选择</span>
                    <span class="right" @click="chioseRoom">确定</span>
                </div>
                <div class="body" @click="chioseItem($event)">
                    <mt-cell :title="item.user_name" v-for="item in users" :data-value="item.user_name">
                        <span class="icon" v-if="chiose === item.user_name">&#xe6b5;</span>
                    </mt-cell>
                </div>
        </mt-popup>
    </div>
</template>

<script>
    import methods from './methods'
    import created from './created'

    export default {
        name: "index",
        data () {
            return {
                room_name: '',
                password: '',
                odds: 10,
                goldRatio: 1, // 人民币 与 金币的汇率     默认： 1元 兑换 1 个金币
                endTime: '',
                link: '',
                user_name: '',
                popupVisible: false,
                users: [],
                chiose: '',
                loading: false,
                errors: ''
            }
        },
        methods,
        created,
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
    }
</script>

<style scoped lang="less">
    @import "../../../../assets/css/bases";
    .chiose {margin-left: 10px;}
    .act {
        margin-top: @lager;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 80%;
        }
    }
    .popup {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 45px;
            border-bottom: @gray solid 1px;
            .left, .right {
                width: 50px;
                text-align: center;
            }
        }
        .body {
            height: 200px;
            overflow-y: auto;
            width: 100%;
            .icon {
                color: @success;
            }
        }
    }
</style>